
    var oBox = document.getElementById('box');
    var ul = document.getElementById('ul');
    var ol = document.getElementById('ol');
    var lis = ul.children;
    var olls = ol.children;

    var timer = setInterval(autoPlay, 3500);

    var index = 0;

    function autoPlay() {
        index++; //
        console.log(index);
        if (index >= 5) {
            index = 0
        }
        if (index < 0) {
            index = 4;
        }

        for (var i = 0; i < lis.length; i++) {

            if (i == index) {
                animate(lis[index], {"opacity": 1});
                animate(olls[index], {"opacity": 1})


            } else {
                animate(lis[i], {"opacity": 0})
                animate(olls[i], {"opacity": 0.1})
            }
        }


        for (var i = 0; i < olls.length; i++) {
            console.log(olls);
            olls[i].index = i;
            olls[i].onmouseenter = function () {
                index = this.index;
                index--;
                clearInterval(timer);
                autoPlay();
            }
            olls[i].onmouseleave = function () {
                index = this.index;
                index;
                timer = setInterval(autoPlay, 3500);
            }
        }


        ul.onmouseenter = function () {
            clearInterval(timer);
        }

        ul.onmouseleave = function () {
            timer = setInterval(autoPlay, 3500);
        }

    }


